সিএসএস৩ এর object-fit প্রপার্টি ব্যবহার করে ইমেজ বা ভিডিওর মতো রিপ্লেসড কন্টেন্টকে একটি কনটেইনারে কীভাবে প্রদর্শন করা হবে তা নির্ধারণ করা যায়। এটি মূলত কন্টেইনারের আয়তনের সাথে কন্টেন্টের স্কেলিং ও ক্রপিং নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
object-fit প্রপার্টি বিভিন্ন ভ্যালু গ্রহণ করতে পারে। নিচে এদের বিস্তারিত দেওয়া হলো:
fillডিফল্ট ভ্যালু। কনটেন্টকে কনটেইনারের সম্পূর্ণ জায়গা পূর্ণ করতে স্কেল করা হয়। এর ফলে কনটেন্ট ডিস্টর্ট হতে পারে।
img {
object-fit: fill;
}
containকনটেন্ট কনটেইনারের মধ্যে ফিট করা হয়, কিন্তু কনটেন্টের অনুপাত অক্ষুণ্ণ থাকে। পুরো কনটেইনার পূর্ণ নাও হতে পারে।
img {
object-fit: contain;
}
coverকনটেইনারের পুরো জায়গা পূর্ণ করতে কনটেন্ট স্কেল করা হয়। এই প্রক্রিয়ায় কনটেন্টের কিছু অংশ ক্রপ হতে পারে।
img {
object-fit: cover;
}
noneকনটেন্টের আসল সাইজ রাখা হয়। এটি স্কেল বা ক্রপ হয় না।
img {
object-fit: none;
}
scale-downকনটেন্টকে none এবং contain ভ্যালুর মধ্যে ছোটটি বেছে নেয়। এটি কনটেইনারের সাইজের সাথে সাইজ কমাতে কাজ করে।
img {
object-fit: scale-down;
}
নিচে একটি উদাহরণ দেওয়া হলো যেখানে বিভিন্ন ভ্যালুর কার্যকারিতা দেখা যাবে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 object-fit Example</title>
<style>
.container {
width: 300px;
height: 200px;
border: 2px solid #333;
margin-bottom: 20px;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover; /* Try changing to other values: fill, contain, none, scale-down */
}
</style>
</head>
<body>
<div class="container">
<img src="example.jpg" alt="Example Image">
</div>
</body>
</html>
object-fit প্রপার্টি বেশিরভাগ আধুনিক ব্রাউজারে সমর্থিত। তবে Internet Explorer 11 এর ক্ষেত্রে এটি কাজ করে না। Internet Explorer-এ ব্যবহার করতে হলে পলিফিল (polyfill) প্রয়োজন হতে পারে।
| ব্রাউজার | সমর্থন |
|---|---|
| Chrome | হ্যাঁ |
| Firefox | হ্যাঁ |
| Safari | হ্যাঁ |
| Edge | হ্যাঁ |
| Internet Explorer | না |
common.read_more
common.or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
